@media(min-width:900px){
*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration:none;
}
a:link{text-decoration: none;}
a:hover{ text-decoration:none;}
a:active{text-decoration:none;}
#app{
  display: flex;
  margin-top: 70px;
  flex-direction: column;
  min-width: 311px;
}
.top{
  width: 100%;
  height: 200px;
  background: aqua;
}
.picture{
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
}
.picture img{
  display: block;
  width: 100%;
  height: auto;
}
.picture .btn{
  width: 60px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  height: 50px;
  color: #fff;
  font-size: 30px;
  font-family: "宋体";
  cursor: pointer;
  display: none;
}
.picture:hover .btn{
  display: block;
}
.picture .btnLeft{left: 20px;}
.picture .btnRit{right: 20px;}
/*********主要业务介绍*********/
.main_business{
  min-height: 1021px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.title{
  font-size: 32px;
}
.box{
  display: -ms-grid;
  display: grid;
  width: 90%;
  -ms-grid-columns: 100%;
  -ms-grid-rows: auto auto ;
  grid-template-columns: 100%;
  grid-template-rows: auto auto ;
  text-align: center;
  justify-content: center;
  padding: 4vh;
}
.business{
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4vh;
}
.industry1,
.industry2,
.industry3,
.industry4,
.industry5,
.industry6 {
  width: 30%;
  min-width: 290px;
  padding: 2vh;
  flex-grow: 1;
}
#business_logo1 img{
  opacity: 0;
}
#business_logo2 img{
  opacity: 0;
}
#business_logo3 img{
  opacity: 0;
}
#business_logo4 img{
  opacity: 0;
}
#business_logo5 img{
  opacity: 0;
}
#business_logo6 img{
  opacity: 0;
}
.anim_fade_image,
.anim_fade_image2,
.anim_fade_image3,
.anim_fade_image4,
.anim_fade_image5,
.anim_fade_image6 {   
 animation: fadeInOut 1s linear alternate forwards ;
}
@keyframes fadeInOut {
 0% {
     opacity:0;
     width: 30%;
  }
 50% {
     opacity: 0.5;
     width: 65%;    
 }
 100% {
     opacity:1;
     width: 100%;
 }
}
/***新闻区域***/
.last_introduce {
  display: flex;
  width: 100%;
  background-color: #f5f5f5;
  justify-content: center;
  flex-wrap: wrap
}
.last_introduce1{
  display: flex;
  width: 100%;
  background-color: #fff;
  justify-content: center;
  flex-wrap: wrap
}
.news,.link_us {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.anim_fade_image7 {   
  animation: fadeInOut1 1s linear alternate forwards ;
 }
 @keyframes fadeInOut1 {
  0% {
      margin-left: 70%;
   }
  50% {
      margin-left: 35%;   
  }
  100% {
      margin-left: 0;
  }
 }
.news_1,
.news_2,
.news_3,
.news_4{
  width: 45%;
  height: 200px;
  height: auto;
  margin: 2%;
  background-color: #fff;
  box-shadow: 0 7px 12px 0 hsla(0,0%,89%,.5);
  overflow: hidden;
  display: grid;
  -ms-grid-columns: auto auto;
  -ms-grid-rows: auto auto ;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto ;
  justify-content: center;
}
.news_1:hover {
  margin-top: 1%;
  margin-bottom: 3%;
}
.news_2:hover {
  margin-top: 1%;
  margin-bottom: 3%;
}
.news_3:hover {
  margin-top: 1%;
  margin-bottom: 3%;
}
.news_4:hover {
  margin-top: 1%;
  margin-bottom: 3%;
}
.news_picture{
  float: left;
  height: 140px;
  width: 160px;
  padding: 5px;
}
.news_picture img{
  float: left;
  height: 130px;
  width: 150px;
}
.news_time{
  float: left;
  padding-top: 5px;
  height: 40px;
  width: 100%;
  text-align: left;
  padding-left: 10px;
}
.news_title{
  float: left;
  height: auto;
  width: 100%;
  padding-bottom: 10px;
  padding-left: 10px;
  text-align: left;
  font-size: 15px;
  color: rgba(102, 99, 99, 0.952);
}
.news_more{
  margin: 0 auto;
  width: 150px;
  color: black;
  margin-top: 30px;
  padding: 5px;
}
.news_more:hover{
  color:  rgba(102, 99, 99, 0.952);
}
.link_picture{
  position: relative;
  margin: 20px;
  width: 400px;
  height: 300px;
  overflow: hidden;
  text-align: center;
}
.link_text{
  position: absolute;
  text-align: center;
  width: 200px;
  left: 50%;
  top: 20%;
  margin-left: -100px;
  color: #fff;
  z-index: 10;
}
.link_picture:hover .ling_text{
  position: absolute;
  text-align: center;
  width: 200px;
  left: 50%;
  top: 20%;
  margin-left: -100px;
  color: #fff;
  z-index: 10;
}
.link_btn{
  position: absolute;
  text-align: center;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  z-index: 10;
}
.link_btn:hover{
  position: absolute;
  text-align: center;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  color: #409eff;
  border-radius: 4px;
  background-color: #fff;
  z-index: 10;
}
.link_picture img{
  opacity: 0.8;
  width: 400px;
  height: 300px;
}
.link_picture:hover img{
  opacity: 1;
  margin-left: -5% ;
  margin-top: -5%;
  width: 110%;
  height: 110%;
}
}
@media(min-width:550px) and (max-width:900px){
  *{
    margin: 0;
    padding: 0;
  }
  a{
    text-decoration:none;
  }
  a:link{text-decoration: none;}
  a:hover{ text-decoration:none;}
  a:active{text-decoration:none;}
  #app{
    display: flex;
    margin-top: 70px;
    flex-direction: column;
    justify-content: center;
    min-width: 280px;
  }
  .top{
    width: 100%;
    height: 200px;
    background: aqua;
  }
  .picture{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
  }
  .picture img{
    display: block;
    width: 100%;
    height: auto;
  }
  .picture .btn{
    width: 60px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    color: #fff;
    font-size: 30px;
    font-family: "宋体";
    cursor: pointer;
    display: none;
  }
  .picture:hover .btn{
    display: block;
  }
  .picture .btnLeft{left: 20px;}
  .picture .btnRit{right: 20px;}
  /*********主要业务介绍*********/
  .main_business{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .title{
    font-size: 32px;
  }
  .box{
    display: -ms-grid;
    display: grid;
    width: 90%;
    -ms-grid-columns: 100%;
    -ms-grid-rows: auto auto ;
    grid-template-columns: 100%;
    grid-template-rows: auto auto ;
    text-align: center;
    justify-content: center;
    padding-top: 4vh;
    padding-bottom: 4vh;
  }
  .business{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .industry1,
  .industry2,
  .industry3,
  .industry4,
  .industry5,
  .industry6 {
    width: 30%;
    min-width: 500px;
    padding: 2vh;
    flex-grow: 1;
  }
  #business_logo1 img{
    opacity: 0;
  }
  #business_logo2 img{
    opacity: 0;
  }
  #business_logo3 img{
    opacity: 0;
  }
  #business_logo4 img{
    opacity: 0;
  }
  #business_logo5 img{
    opacity: 0;
  }
  #business_logo6 img{
    opacity: 0;
  }
  .anim_fade_image,
  .anim_fade_image2,
  .anim_fade_image3,
  .anim_fade_image4,
  .anim_fade_image5,
  .anim_fade_image6 {   
   animation: fadeInOut 1s linear alternate forwards ;
  }
  @keyframes fadeInOut {
   0% {
       opacity:0;
       width: 30%;
    }
   50% {
       opacity: 0.5;
       width: 65%;    
   }
   100% {
       opacity:1;
       width: 100%;
   }
  }
  /***新闻区域 ***/
  .last_introduce {
    display: flex;
    width: 100%;
    background-color: #f5f5f5;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap
  }
  .last_introduce1{
    display: flex;
    width: 100%;
    background-color: #fff;
    justify-content: center;
    flex-wrap: wrap
  }
  .news,.link_us {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
  }
  .anim_fade_image7 {   
    animation: fadeInOut1 1s linear alternate forwards ;
   }
   @keyframes fadeInOut1 {
    0% {
        margin-left: 70%;
     }
    50% {
        margin-left: 35%;   
    }
    100% {
        margin-left: 0;
    }
   }
  .news_1,
  .news_2,
  .news_3,
  .news_4{
    margin-top: 30px;
    width: 45%;
    height: 200px;
    height: auto;
    margin-left: 3%;
    background-color: #fff;
    box-shadow: 0 7px 12px 0 hsla(0,0%,89%,.5);
    overflow: hidden;
    display: grid;
    -ms-grid-columns: 120px auto;
    -ms-grid-rows: auto auto ;
    grid-template-columns: 120px auto;
    grid-template-rows: auto auto ;
    justify-content: flex-start;
    min-width: 354px;
    flex-grow: 1;
  }
  .news_1:hover {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .news_2:hover {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .news_3:hover {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .news_4:hover {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .news_picture{
    float: left;
    height: 130px;
    width: 120px;
    padding: 5px;
  }
  .news_picture img{
    float: left;
    height: 120px;
    width: 110px;
  }
  .news_time{
    float: left;
    padding-top: 5px;
    height: 40px;
    width: 100%;
    text-align: left;
    padding-left: 10px;
  }
  .news_title{
    float: left;
    height: auto;
    width: 100%;
    padding-bottom: 10px;
    padding-left: 10px;
    text-align: left;
    font-size: 15px;
    color: rgba(102, 99, 99, 0.952);
  }
  .news_more{
    margin: 0 auto;
    width: 150px;
    color: black;
    margin-top: 30px;
    padding: 5px;
  }
  .news_more:hover{
    color:  rgba(102, 99, 99, 0.952);
  }
  .link_picture{
    position: relative;
    margin: 20px;
    width: 400px;
    height: 300px;
    overflow: hidden;
    text-align: center;
  }
  .link_text{
    position: absolute;
    text-align: center;
    width: 200px;
    left: 50%;
    top: 20%;
    margin-left: -100px;
    color: #fff;
    z-index: 10;
  }
  .link_picture:hover .ling_text{
    position: absolute;
    text-align: center;
    width: 200px;
    left: 50%;
    top: 20%;
    margin-left: -100px;
    color: #fff;
    z-index: 10;
  }
  .link_btn{
    position: absolute;
    text-align: center;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    z-index: 10;
  }
  .link_btn:hover{
    position: absolute;
    text-align: center;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    color: #409eff;
    border-radius: 4px;
    background-color: #fff;
    z-index: 10;
  }
  .link_picture img{
    opacity: 0.8;
    width: 400px;
    height: 300px;
  }
  .link_picture:hover img{
    opacity: 1;
    margin-left: -5% ;
    margin-top: -5%;
    width: 110%;
    height: 110%;
  }
}
  @media(min-width:0px) and (max-width:550px){
    *{
      margin: 0;
      padding: 0;
    }
    a{
      text-decoration:none;
    }
    a:link{text-decoration: none;}
    a:hover{ text-decoration:none;}
    a:active{text-decoration:none;}
    #app{
      display: flex;
      justify-content: center;
      margin-top: 70px;
      flex-direction: column;
      width: 100%;
      min-width: 280px;
    }
    .top{
      width: 100%;
      height: 200px;
      background: aqua;
    }
    .picture{
      position: relative;
      display: flex;
      width: 100%;
      height: auto;
    }
    .picture img{
      display: block;
      width: 100%;
      height: auto;
    }
    .picture .btn{
      width: 60px;
      position: absolute;
      top: 50%;
      margin-top: -25px;
      height: 50px;
      color: #fff;
      font-size: 30px;
      font-family: "宋体";
      cursor: pointer;
      display: none;
    }
    .picture:hover .btn{
      display: block;
    }
    .picture .btnLeft{left: 20px;}
    .picture .btnRit{right: 20px;}
    /*********主要业务介绍*********/
    .main_business{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .title{
      font-size: 32px;
    }
    .box{
      display: -ms-grid;
      display: grid;
      width: 90%;
      -ms-grid-columns: 100%;
      -ms-grid-rows: auto auto ;
      grid-template-columns: 100%;
      grid-template-rows: auto auto ;
      text-align: center;
      justify-content: center;
      padding-top: 4vh;
      padding-bottom: 4vh;
    }
    .business{
      box-sizing: border-box;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    .business>.industry1 {
      width: 30%;
      min-width: 260px;
      padding: 2vh;
      flex-grow: 1;
    }
    .business>.industry2 {
       width: 30%;
       padding: 2vh;
       min-width: 260px;
       flex-grow: 1;
    }
    .business>.industry3 {
      width: 30%;
      padding: 2vh;
      min-width: 260px;
      flex-grow: 1;
    }
    .business>.industry4 {
      width: 30%;
      padding: 2vh;
      min-width: 260px;
      flex-grow: 1;
    }
    .business>.industry5 {
      width: 30%;
      padding: 2vh;
      min-width: 260px;
      flex-grow: 1;
    }
    .business>.industry6 {
      width: 30%;
      padding: 2vh;
      min-width: 260px;
      flex-grow: 1;
    }
    .anim_fade_image,
    .anim_fade_image2,
    .anim_fade_image3,
    .anim_fade_image4,
    .anim_fade_image5,
    .anim_fade_image6 {   
     animation: fadeInOut 1s linear alternate forwards ;
    }
    @keyframes fadeInOut {
     0% {
         opacity:0;
         width: 30%;
      }
     50% {
         opacity: 0.5;
         width: 65%;    
     }
     100% {
         opacity:1;
         width: 100%;
     }
    }
    #business_logo1 img{
      opacity: 0;
    }
    #business_logo2 img{
      opacity: 0;
    }
    #business_logo3 img{
      opacity: 0;
    }
    #business_logo4 img{
      opacity: 0;
    }
    #business_logo5 img{
      opacity: 0;
    }
    #business_logo6 img{
    opacity: 0;
    }
    /***主要业务介绍和科技成果介绍区 ***/
    .last_introduce {
      display: flex;
      width: 100%;
      background-color: #f5f5f5;
      justify-content: center;
      flex-wrap: wrap
    }
    .news,.link_us {
      box-sizing: border-box;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
    }
    .anim_fade_image7 {   
      animation: fadeInOut1 1s linear alternate forwards ;
     }
     @keyframes fadeInOut1 {
      0% {
          margin-left: 70%;
       }
      50% {
          margin-left: 35%;   
      }
      100% {
          margin-left: 0;
      }
     }
    .news_1,
    .news_2,
    .news_3,
    .news_4{
      margin-top: 30px;
      width: 45%;
      height: 200px;
      height: auto;
      background-color: #fff;
      box-shadow: 0 7px 12px 0 hsla(0,0%,89%,.5);
      margin-left: 3%;
      overflow: hidden;
      display: grid;
      -ms-grid-columns: auto auto;
      -ms-grid-rows: auto auto ;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto ;
      justify-content: center;
      min-width: 261px;
      flex-grow: 1;
    }
    .news_1:hover {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .news_2:hover {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .news_3:hover {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .news_4:hover {
      margin-top: 20px;
      margin-bottom: 10px;
    }
    .news_picture{
      float: left;
      height: 130px;
      width: 120px;
      padding: 5px;
    }
    .news_picture img{
      float: left;
      height: 120px;
      width: 110px;
    }
    .news_time{
      float: left;
      padding-top: 5px;
      height: 40px;
      width: 100%;
      text-align: left;
      padding-left: 10px;
      background-color: #fff;
    }
    .news_title{
      float: left;
      height: auto;
      width: 100%;
      padding-bottom: 10px;
      padding-left: 10px;
      text-align: left;
      font-size: 15px;
      color: rgba(102, 99, 99, 0.952);
      background-color: #fff;
    }
    .news_more{
      /* background-color: black; */
      margin: 0 auto;
      width: 150px;
      color: black;
      margin-top: 30px;
      padding: 5px;
    }
    .news_more:hover{
      color:  rgba(102, 99, 99, 0.952);
    }
    .last_introduce1{
      display: flex;
      position: relative;
      width: 100%;
      background-color: #fff;
      justify-content: center;
      flex-wrap: wrap
    }
    .link_picture{
      position: relative;
      margin-top: 20px;
      width: 100%;
      min-width: 250px;
      height: 250px;
      overflow: hidden;
      text-align: center;
    }
    .link_text{
      position: absolute;
      text-align: center;
      width: 200px;
      left: 50%;
      top: 20%;
      margin-left: -100px;
      color: #fff;
      z-index: 10;
    }
    .link_picture:hover .ling_text{
      position: absolute;
      text-align: center;
      width: 200px;
      left: 50%;
      top: 20%;
      margin-left: -100px;
      color: #fff;
      z-index: 10;
    }
    .link_btn{
      position: absolute;
      text-align: center;
      width: 80px;
      left: 50%;
      top: 50%;
      margin-left: -40px;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 4px;
      z-index: 10;
    }
    .link_btn:hover{
      position: absolute;
      text-align: center;
      width: 80px;
      left: 50%;
      top: 50%;
      margin-left: -40px;
      color: #409eff;
      border-radius: 4px;
      background-color: #fff;
      z-index: 10;
    }
    .link_picture img{
      opacity: 0.8;
      width: 100%;
      height: 250px;
    }
    .link_picture:hover img{
      opacity: 1;
      margin-left: -5% ;
      margin-top: -5%;
      width: 110%;
      height: 110%;
    }
    }